<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>龙岗清风改版升级介绍</title>
    <link rel="stylesheet" href="__CSS__/breeze/fullpage.min.css">
    <link rel="stylesheet" href="__CSS__/breeze/main.css">
    <script src="__JS__/breeze/flexible.js"></script>
    <script src="__JS__/breeze/jweixin-1.0.0.js"></script>
    <!-- <script src="__JS__/breeze/audio.js"></script> -->
    <script>
        //微信分享
        function share() {
            //微信配置
            wx.config({$jssdk});
            wx.ready(function() {
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title: '{$title}', // 分享标题
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享给朋友
                wx.onMenuShareAppMessage({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到QQ
                wx.onMenuShareQQ({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到腾讯微博
                wx.onMenuShareWeibo({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
                //分享到QQ空间
                wx.onMenuShareQZone({
                    title: '{$title}', // 分享标题
                    desc: '{$desc}', // 分享描述
                    link: '{$link}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '{$imgUrl}', // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
        };
        share();
    </script>
</head>

<body>

    <div id="loading">
        <img src="__IMG__/breeze/loading.gif">
    </div>

    <div class="bgMusic"></div>

    <div id="wraper">

        <div data-anchor='p1' class="section p1">
            <div class="title">
                <img class="" src="__IMG__/breeze/p1/title.png" alt="">
            </div>
            <div class="message">
                <img class="" src="__IMG__/breeze/p1/message.png" alt="">
            </div>
            <div class="finger">
                <img class="" src="__IMG__/breeze/p1/finger.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p2' class="section p2">
            <div class="dialog1 dialog">
                <img src="__IMG__/breeze/p2/dialog1.png" alt="">
            </div>
            <div class="dialog2 dialog">
                <img src="__IMG__/breeze/p2/dialog2.png" alt="">
            </div>
            <div class="dialog3 dialog">
                <img src="__IMG__/breeze/p2/dialog3.png" alt="">
            </div>
            <div class="dialog4 dialog">
                <img src="__IMG__/breeze/p2/dialog4.png" alt="">
            </div>
            <div class="dialog5 dialog">
                <img src="__IMG__/breeze/p2/dialog5.png" alt="">
            </div>
            <div class="dialog6 dialog">
                <img src="__IMG__/breeze/p2/dialog6.png" alt="">
            </div>
            <img class="enter" src="__IMG__/breeze/p2/enter.png" alt="">
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p3' class="section p3">
            <div class="title">
                <img class="" src="__IMG__/breeze/title.png" alt="">
            </div>
            <div class="word">
                <img class="" src="__IMG__/breeze/p3/word.png" alt="">
            </div>
            <div class="code">
                <img class="" src="__IMG__/breeze/p3/code.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p4' class="section p4">
            <div class="title">
                <img src="__IMG__/breeze/title.png" alt="">
            </div>
            <div class="message">
                <img src="__IMG__/breeze/p4/title.png" alt="">
            </div>
            <div class="list">
                <img src="__IMG__/breeze/p4/content.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p5' class="section p5">
            <img class="title" src="__IMG__/breeze/title.png" alt="" width="40%">
            <div class="center">
                <img class="all" src="__IMG__/breeze/p5/content.png" alt="" width="80%">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p6' class="section p6">
            <div class="title1">
                <img class="" src="__IMG__/breeze/p6/title1.png" alt="">
            </div>
            <div class="title2">
                <img class="" src="__IMG__/breeze/p6/title2.png" alt="">
            </div>
            <div class="msg">
                <img class="" src="__IMG__/breeze/p6/msg.png" alt="">
            </div>
            <div class="icon1">
                <img class="" src="__IMG__/breeze/p6/icon1.png" alt="">
            </div>
            <div class="word1">
                <img class="" src="__IMG__/breeze/p6/word1.png" alt="">
            </div>
            <div class='icon2'>
                <img class="" src="__IMG__/breeze/p6/icon2.png" alt="">
            </div>
            <div class="word2">
                <img class="" src="__IMG__/breeze/p6/word2.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p7' class="section p7 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p7/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p8' class="section p8 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p8/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p9' class="section p9 center">
            <div class="all">
                <img src="__IMG__/breeze/p9/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p10' class="section p10 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p10/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p11' class="section p11 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p11/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p12' class="section p12 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p12/all.png" alt="">
            </div>
            <div class="arrow start"></div>
        </div>

        <div data-anchor='p13' class="section p13 center">
            <div class="all">
                <img class="" src="__IMG__/breeze/p13/all.png" alt="">
            </div>
        </div>

    </div>

    <script src="__JS__/breeze/jquery.min.js"></script>
    <script src="__JS__/breeze/fullpage.min.js"></script>
    <script src="__JS__/breeze/bgMusic.js"></script>
    <script src="__JS__/breeze/preLoad.js"></script>
    <script src="__JS__/breeze/animate.js"></script>
    <script src="__JS__/breeze/main.js"></script>
    <script>
        $(function() {

            var animateTime = 400;

            // 全屏插件
            $('#wraper').fullpage({
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE', // 开源项目
                verticalCentered: false, // 在段落内部不垂直居中
                anchors: [
                    'p1',
                    'p2',
                    'p3',
                    'p4',
                    'p5',
                    'p6',
                    'p7',
                    'p8',
                    'p9',
                    'p10',
                    'p11',
                    'p12',
                    'p13'
                ], // 页面
                recordHistory: false,
                onLeave: function(origin, destination, direction) {

                    // 进入相应页面回调
                    if (destination.anchor == 'p2') {
                        $('.p2 .dialog1').animateCss('fadeIn', 800);
                        $('.p2 .dialog2').animateCss('fadeIn', 1600);
                        $('.p2 .dialog3').animateCss('fadeIn', 2400);
                        $('.p2 .dialog4').animateCss('fadeIn', 3200);
                        $('.p2 .dialog5').animateCss('fadeIn', 4000);
                        $('.p2 .dialog6').animateCss('fadeIn', 4800);
                    }

                    if (destination.anchor == 'p3') {
                        $('.p3 .title').animateCss('fadeIn', animateTime * 1);
                        $('.p3 .word').animateCss('fadeIn', animateTime * 2);
                        $('.p3 .code').animateCss('fadeIn', animateTime * 3);
                    }

                    if (destination.anchor == 'p4') {
                        $('.p4 .title').animateCss('fadeIn', animateTime);
                        $('.p4 .message').animateCss('fadeIn', animateTime * 2);
                        $('.p4 .list').animateCss('fadeIn', animateTime * 3);
                    }

                    if (destination.anchor == 'p5') {
                        $('.p5 .title').animateCss('fadeIn', animateTime);
                        $('.p5 .all').animateCss('fadeIn', animateTime * 2);
                    }

                    if (destination.anchor == 'p6') {
                        $('.p6 .title1').animateCss('fadeIn', animateTime);
                        $('.p6 .title2').animateCss('fadeIn', animateTime * 2);
                        $('.p6 .msg').animateCss('fadeIn', animateTime * 3);
                        $('.p6 .icon1').animateCss('rotate', animateTime * 4);
                        $('.p6 .icon2').animateCss('rotate', animateTime * 5);
                        $('.p6 .word1').animateCss('bigger', animateTime * 6);
                        $('.p6 .word2').animateCss('bigger', animateTime * 7);
                    }

                    if (destination.anchor == 'p7') {
                        $('.p7 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p8') {
                        $('.p8 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p9') {
                        $('.p9 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p10') {
                        $('.p10 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p11') {
                        $('.p11 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p12') {
                        $('.p12 .all').animateCss('fadeIn', animateTime);
                    }

                    if (destination.anchor == 'p13') {
                        $('.p13 .all').animateCss('fadeIn', animateTime);
                    }
                }
            })

            // 预加载
            var preLoad = new PreLoad({
                images: [
                    '__IMG__/breeze/bg.png',
                    '__IMG__/breeze/title.png',
                    '__IMG__/breeze/arrow.png',
                    '__IMG__/breeze/p1/finger.png',
                    '__IMG__/breeze/p1/message.png',
                    '__IMG__/breeze/p1/title.png',
                    '__IMG__/breeze/p2/dialog1.png',
                    '__IMG__/breeze/p2/dialog2.png',
                    '__IMG__/breeze/p2/dialog3.png',
                    '__IMG__/breeze/p2/dialog4.png',
                    '__IMG__/breeze/p2/dialog5.png',
                    '__IMG__/breeze/p2/dialog6.png',
                    '__IMG__/breeze/p2/enter.png',
                    '__IMG__/breeze/p3/code.png',
                    '__IMG__/breeze/p3/title.png',
                    '__IMG__/breeze/p3/word.png',
                    '__IMG__/breeze/p4/content.png',
                    '__IMG__/breeze/p4/title.png',
                    '__IMG__/breeze/p5/content.png',
                    '__IMG__/breeze/p6/icon1.png',
                    '__IMG__/breeze/p6/icon2.png',
                    '__IMG__/breeze/p6/title.png',
                    '__IMG__/breeze/p6/msg.png',
                    '__IMG__/breeze/p6/title1.png',
                    '__IMG__/breeze/p6/title2.png',
                    '__IMG__/breeze/p6/word1.png',
                    '__IMG__/breeze/p6/word2.png',
                    '__IMG__/breeze/p7/all.png',
                    '__IMG__/breeze/p8/all.png',
                    '__IMG__/breeze/p9/all.png',
                    '__IMG__/breeze/p10/all.png',
                    '__IMG__/breeze/p11/all.png',
                    '__IMG__/breeze/p12/all.png',
                    '__IMG__/breeze/p13/all.png',
                ],
                audios: ['__MUSIC__/breeze/bg.mp3'],
                loaded: function() {
                    setTimeout(function() {
                        $('#loading').hide();
                        $('.p1 .top').animateCss('fadeIn', 0);
                        $('.p1 .title').animateCss('fadeIn', animateTime * 1);
                        $('.p1 .message').animateCss('fadeIn', animateTime * 2).on('click', function() {
                            $.fn.fullpage.moveTo('p2');
                        });
                        $('.p1 .finger').animateCss('flash', animateTime * 3).on('click', function() {
                            $.fn.fullpage.moveTo('p2');
                        });
                    }, 2000)
                }
            })

            // 微信自动播放
            document.addEventListener("WeixinJSBridgeReady", function() {
                // 背景音乐
                var bgMusic = new BgMusic({
                    music: "__MUSIC__/breeze/bg.mp3"
                });
            }, false);

        })
    </script>
</body>

</html>